<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="./hls.js"></script>
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>

<body>
  <video id="my-video" width="640" height="360" controls src=""></video>

  <script>
    (async () => {
      var videoUrl = 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/bda11534-a8e7-4366-a39a-a88c48817c27/default.jobtemplate.hls360.m3u8';
      var video = document.getElementById('my-video');
      const m3u8Text = `#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:7
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:6,
default.jobtemplate.hls360_00001.ts
#EXTINF:6,
default.jobtemplate.hls360_00002.ts
#EXTINF:6,
default.jobtemplate.hls360_00003.ts
#EXTINF:6,
default.jobtemplate.hls360_00004.ts
#EXTINF:6,
default.jobtemplate.hls360_00005.ts
#EXTINF:4,
default.jobtemplate.hls360_00006.ts
#EXT-X-ENDLIST
`;
      // 解析m3u8文件获取所有.ts文件的URL
      const tsUrls = m3u8Text.match(/[^\s\r\n]+\.ts(\?[^\s\r\n]*)?/g)
        .map(tsPath => {
          // 如果是完整URL，直接返回
          if (tsPath.startsWith('http')) {
            return tsPath;
          }
          // 如果是相对路径，需要根据基础URL构建完整URL
          const baseUrl = videoUrl.substring(0, videoUrl.lastIndexOf('/') + 1);
          console.log(tsPath);
          return baseUrl + tsPath;
        });
      // console.log(tsUrls);
      // 并行下载所有的.ts文件
      const tsBlobs = await Promise.all(tsUrls.map(url =>
        fetch(url).then(res => res.arrayBuffer())
      ));

      // 合并所有的.ts文件
      // const chunks = [];
      // for (const blob of tsBlobs) {
      //   const arrayBuffer = await blob.arrayBuffer();
      //   chunks.push(arrayBuffer);
      // }

      // 创建合并后的Blob
      const videoBlob = new Blob(tsBlobs, { type: 'video/MP4' });

      console.log(videoBlob);
      // 创建下载链接
      const url = URL.createObjectURL(videoBlob);
      console.log(url);

      video.src = url;
      video.addEventListener('loadedmetadata', () => {
        // video.play();
      });

      // const a = document.createElement('a');
      // a.href = url;
      // a.download = 'm3u8_video.mp4';
      // document.body.appendChild(a);
      // a.click();

      // var hls = new Hls();
      // hls.loadSource(videoUrl); // 替换为你的 HLS 播放列表 URL
      // hls.attachMedia(video);
      // hls.on(Hls.Events.MANIFEST_PARSED, function () {
      //   // video.play();
      // });

      // var reader = new FileReader();
      // reader.onloadend = function () {
      //   var data = reader.result;
      //   console.log(data);
      //   if (Hls.isSupported()) {
      //     var hls = new Hls();
      //     hls.loadSource(data); // 替换为你的 HLS 播放列表 URL
      //     hls.attachMedia(video);
      //     hls.on(Hls.Events.MANIFEST_PARSED, function () {
      //       // video.play();
      //     });
      //   }

      //   // 这里 data 是视频的二进制数据，你可以将其保存为文件
      //   // 但通常这一步是在服务器端完成的，因为需要将数据写入文件系统
      // };
      // reader.readAsDataURL(videoBlob);

      // if (Hls.isSupported()) {
      //   var hls = new Hls();
      //   hls.loadSource(url); // 替换为你的 HLS 播放列表 URL
      //   hls.attachMedia(video);
      //   hls.on(Hls.Events.MANIFEST_PARSED, function () {
      //     video.play();
      //   });
      // }
      // const player = videojs('my-video', {
      //   html5: {
      //     hlsjsConfig: {
      //       debug: true
      //     }
      //   }
      // });
      // player.src({ type: 'video/mp4', src: url });


    })();
  </script>
</body>

</html>